<template>
	<view class="main">
		<view>
			<view class="flex flex-ai-c flex-jc-sb card">
				<view>输入登陆密码</view>
				<view>
					<u-input inputAlign="right" v-model="form.old_password" border="none"
						placeholder="请输入旧密码"></u-input>
				</view>
			</view>
			<view class="flex flex-ai-c flex-jc-sb card">
				<view>新密码</view>
				<view>
					<u-input inputAlign="right" v-model="form.new_password" border="none"
						placeholder="请输入新密码"></u-input>
				</view>
			</view>
			<view class="flex flex-ai-c flex-jc-sb card">
				<view>确认密码</view>
				<view>
					<u-input inputAlign="right" v-model="form.once_more" border="none" placeholder="请再次确认密码"></u-input>
				</view>
			</view>
		</view>
		<view style="margin: 60rpx 0 20rpx 0">
			<ButtonConfirm myTxt="保存" @click="updateUserPwd"></ButtonConfirm>
		</view>

	</view>
</template>

<script>
	import ButtonConfirm from '@/components/buttonConfirm.vue'
	import user from '@/api/user.js'
	export default {
		components: {
			ButtonConfirm
		},
		data() {
			return {
				form: {
					old_password: '',
					new_password: '',
					once_more: ''
				}
			}
		},
		onLoad(op) {

		},
		methods: {
			showToast(title, success = () => {}) {
				uni.showToast({
					title: title,
					icon: 'none',
					success: success
				})
			},
			async updateUserPwd() {
				const {
					once_more,
					...form
				} = this.form
				if (!this.form.old_password) {
					return this.showToast('请输入旧密码')
				} else if (!this.form.old_password) {
					return this.showToast('请输入新密码')
				} else if (!this.form.old_password) {
					return this.showToast('请输入确认密码')
				}

				if (once_more !== form.new_password) return uni.showToast({
					title: '两次密码不一致',
					icon: 'none'
				})

				const res = await user.updateUserPwd(form)
				if (res.code == 200) {
					this.showToast('修改成功',()=>{
						uni.navigateBack()
					})
					
				}
			},
		}
	}
</script>
<style>
	page {
		background: #F2F2F2;
	}
</style>
<style lang="scss" scoped>
	.main {
		.title {
			padding: 0 30rpx !important;
			background: #F2F2F2 !important;
			border: 0 !important;
			line-height: 90rpx;
			color: #333333 !important;
		}

		text {
			color: #FC602B;
			margin-right: 5rpx;
		}

		.card {
			padding: 0 40rpx;
			height: 90rpx;
			border-bottom: 1rpx solid #D8D8D8;
			background: #fff;
			font-size: 28rpx;
			color: #666666;
		}
	}
</style>